<!--  -->
<template>
  <div class="recommen-view">
    <div v-for="(item,index) in recomends" :key="index" class="img">
      <a :href="item.link">
      <img :src="item.image"  />
      <p nowrap>{{item.title}}</p>
      </a>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    recomends: {
      type: Array,
      default() {
        return [];
      }
    }
  },
  data() {
    return {};
  },
  components: {},
  methods: {}
};
</script>

<style lang='scss' scoped>
@import "@/assets/css/extend.scss";

.recommen-view {
  width: 100%;
  overflow: hidden;
  display: flex;
  text-align: center;
  padding:.2rem 0;
  border-bottom: 6px solid #f3f3f3;

  .img {
    flex: 1;
    width: 25%;
    
    img {
      display: block;
      width: 1.5rem;
      height:1.5rem;
      border-radius: 50%;
      margin: 0 auto;
    }
  }
}
</style>